<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>04.bootstrap的栅格系统</title>
        <link rel="stylesheet" href="static/css/bootstrap.css">
    </head>
    <body>
        <!-- 栅格系统必须放在容器之中，容器 -->
        <div class="container" style="margin-top: 30px">
            <div class="row">
                <!-- 一行最多12列，12个多余的，就会自动移到下一行 -->
                <div class="col-sm-3" style="border: 1px red solid">hello</div>
                <div class="col-sm-3" style="border: 1px lightblue solid">world</div>
                <div class="col-sm-3" style="border: 1px orange solid">你好</div>
                <div class="col-sm-2" style="border: 1px pink solid">世界</div>
                <div class="col-sm-1" style="border: 1px lightsalmon solid">！！！</div>
            </div>

            <div class="row" style="margin-top: 20px">
                <!-- 每一个栅格的格子里面，也可以去划分，最多有12分，我们显示出来的，不是必须要等分的 -->
                <div class="col-lg-10" style="border: 3px red solid">
                    <div class="row" style="margin: 5px">
                        <div class="col-lg-2" style="border: 1px red solid">李白</div>
                        <div class="col-lg-2" style="border: 1px orange solid">杜甫</div>
                        <div class="col-lg-2" style="border: 1px green solid">白居易</div>
                        <div class="col-lg-2" style="border: 1px purple solid">李商隐</div>
                        <div class="col-lg-2" style="border: 1px blue solid">元稹</div>
                        <div class="col-lg-2" style="border: 1px red solid">王勃</div>
                    </div>
                </div>
                <div class="col-lg-2" style="border: 1px lightblue solid">world</div>
            </div>

            <div class="row" style="margin-top: 20px">
                <!-- 偏移3个格子， 占用6个格子-->
                <div class="col-sm-6 col-sm-offset-3" style="border: 1px red solid">李白</div>
                <!-- 偏移7个格子， 占用4个格子-->
                <div class="col-sm-4 col-sm-offset-7" style="border: 1px purple solid">白居易</div>
            </div>
        </div>

    </body>
</html>

